
<html>
<head>
 <link href="assets/css/home_style.css" rel="stylesheet" />
 
 <script src="assets/js/jquery1.9.1.min.js" > </script>
 <script src="assets/js/home_script.js" > </script>
 
</head>

<body onload="init();" onresize="resize()"  style="overflow: hidden; scrolling : 'no'; margin:0; padding:0;">

<div id = "div_store_locator" class = "store_locator" > 
		<div id = "div_close_locator"  class = "close_locator" >
		   <a  id = "close_locator" target="_blank" style = "color:white;"> CLOSE WINDOW </a>
		</div>	
</div>

<div id = "div_contact_us" class = "contact_us" > 
		<div id = "submit_contact_us"  class = "submit_contact_us" >
		   <a  id = "submit_contact_us" target="_blank" style = "color:white;margin-right:25px;" > SUBMIT </a>
		   <a  id = "cancel_contact_us" target="_blank" style = "color:white;margin-left: 25px;"> CANCEL </a>
		</div>	
</div>

	
<div id = "div_background" class = "background" >

	

	<svg width="100%" height="100%" translate(0,0)>

		<g id = "g1" >
		<image id="banner1" xlink:href = "Images/image 199.png" > </image>
		</g>

		<g id = "g2">

		<image id="flower2203" xlink:href = "Images/image_2203.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
		</image>


		<image id="flower1" xlink:href = "Images/image_220.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
		</image>

		<image id="flower4" xlink:href = "Images/image_220.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
		</image>

		<image id="flower2822" xlink:href = "Images/image_282.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />	
		</image>

		</g>

		<g id = "g3">
		<image id="door3" xlink:href = "Images/image_243.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s" />	
		</image>

		<image id="door4" xlink:href = "Images/image_249.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s" />		
		</image>

		<image id="light_bulb" xlink:href = "Images/image_2051.bmp" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="0.5s" dur="1s" />
		</image>

		<image id="door2" xlink:href = "Images/image 251.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s"  repeatCount="1" />	
		</image>

		<image id="door249" xlink:href = "Images/image_249.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s"  repeatCount="1" />		
		</image>


		<image id="door247" xlink:href = "Images/image_247.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s"  repeatCount="1" />		
		</image>

		<image id="door245" xlink:href = "Images/image_245.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s"  repeatCount="1" />		
		</image>


		<image id="door241" xlink:href = "Images/image_241.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s"  repeatCount="1" />		
		</image>

		<image id="door237" xlink:href = "Images/image_237.png" >
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="0" dur="1s"  repeatCount="1" />		
		</image>


		<image id="door1" xlink:href = "Images/image 231.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="0.5s" dur="1s" />
		</image>

		<image id="flower2" xlink:href = "Images/image_2791.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />	
		</image>


		<image id="flower6" xlink:href = "Images/image_279.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
		</image>


		<image id="flower7" xlink:href = "Images/image_281.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />	
		</image>

		<image id="flower282" xlink:href = "Images/image_282.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />	
		</image>


		<image id="flower281b" xlink:href = "Images/image_281.png" >

				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />		

		</image>

		<image id="flower2823" xlink:href = "Images/image_282.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />	
		</image>

		<image id="flower5" xlink:href = "Images/image_280.png" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
		</image>

		<image id="mai_media" xlink:href = "Images/img_maimedia.png" x="-32" y="-30" onmouseover="scaleUp(this)" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
				<animateTransform begin="1s" dur="3s" additive="sum"
					  attributeName="transform" type="rotate" values="0; 360" />
				<animateTransform attributeName="transform" type="scale" from="0.6" to="0.8"
					additive="sum" begin="1s" dur="2.5s" fill="freeze"/>
		</image>

		<image id="mai_collections" xlink:href = "Images/img_maicollections.png" x="-32" y="-30" onmouseover="scaleUp(this)">
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
				<animateTransform begin="1s" dur="3s" additive="sum"
					  attributeName="transform" type="rotate" values="0; 360" />
				<animateTransform attributeName="transform" type="scale" from="0.6" to="0.8"
					additive="sum" begin="1s" dur="2.5s" fill="freeze"/>
		</image>

		<image id="mai_story" xlink:href = "Images/img_maistory.png" x="-32" y="-30" onmouseover="scaleUp(this)" >
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
				<animateTransform begin="1s" dur="2.5s" additive="sum"
					  attributeName="transform" type="rotate" values="0; 360" />
				<animateTransform attributeName="transform" type="scale" from="0.6" to="0.8"
					additive="sum" begin="1s" dur="2.5s" fill="freeze"/>
		</image>

		<image id="mai_home" xlink:href = "Images/img_maihome.png" x="-32" y="-30" onmouseover="scaleUp(this)">
				<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
				<animateTransform begin="1s" dur="2s" additive="sum"
					  attributeName="transform" type="rotate" values="0; 360" />
				<animateTransform attributeName="transform" type="scale" from="0.6" to="0.8"
					additive="sum" begin="1s" dur="1s" fill="freeze"/>
		</image>

		<!-- ---------------  menu scale -------------------------->
		<image id="under_text" xlink:href = "Images/under_text.png" x="-50" y="-50" onmouseover="scaleUp(this)" onmouseout="scaleDown(this)"> </image>
		<!-- Captions -->
		<image id="home_caption" xlink:href = "Images/img_home_caption.png" onmouseover="scaleUp(this)"> </image>
		<image id="story_caption" xlink:href = "Images/img_story_caption.png" > </image>
		<image id="media_caption" xlink:href = "Images/img_media_caption.png" > </image>
		<image id="collections_caption" xlink:href = "Images/img_collections_caption.png" > </image>

		<image id="mai_collections_scale" xlink:href = "Images/img_maicollections.png" x="-32" y="-30" onmouseout="scaleDown(this)">
			<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
			<animateTransform begin="1s" dur="2s" additive="sum"
				attributeName="transform" type="rotate" values="0; 360" />
			<animateTransform attributeName="transform" type="scale" from="0.6" to="1"
				additive="sum" begin="2s" dur="1s" fill="freeze"/>
		</image>
		<image id="mai_media_scale" xlink:href = "Images/img_maimedia.png" x="-32" y="-30" onmouseout="scaleDown(this)"> 
			<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
			<animateTransform begin="1s" dur="2s" additive="sum"
				attributeName="transform" type="rotate" values="0; 360" />
			<animateTransform attributeName="transform" type="scale" from="0.6" to="1"
				additive="sum" begin="2s" dur="1s" fill="freeze"/>
		</image>
		<image id="mai_story_scale" xlink:href = "Images/img_maistory.png" x="-32" y="-30" onmouseout="scaleDown(this)"> 
			<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
			<animateTransform begin="1s" dur="2s" additive="sum"
				attributeName="transform" type="rotate" values="0; 360" />
			<animateTransform attributeName="transform" type="scale" from="0.6" to="1"
				additive="sum" begin="2s" dur="1s" fill="freeze"/>
		</image>
		<image id="mai_home_scale" xlink:href = "Images/img_maihome.png" x="-32" y="-30" onmouseout="scaleDown(this)">
			<animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="1s" />
				<animateTransform begin="1s" dur="2s" additive="sum"
					attributeName="transform" type="rotate" values="0; 360" />
				<animateTransform attributeName="transform" type="scale" from="0.6" to="1"
					additive="sum" begin="1s" dur="1s" fill="freeze"/>
		</image>


		<image id="flybox1_glow" xlink:href="Images/image_216_glow.png"  > </image>
		<image id="flybox2_glow" xlink:href="Images/image_286_glow.png"   > </image>

		<image id="flybox1" xlink:href="Images/image_216.png"  > </image>
		<image id="flybox2" xlink:href="Images/image_286.png"   > </image>

		<image id="light1" xlink:href = "Images/mai_light1.png"></image>
		<image id="light2" xlink:href = "Images/mai_light1.png"></image>
		<image id="light3" xlink:href = "Images/mai_light1.png"></image>
		<image id="light4" xlink:href = "Images/mai_light1.png"></image>
		<image id="light5" xlink:href = "Images/mai_light1.png"></image>
		<image id="light6" xlink:href = "Images/mai_light1.png"></image>
		<image id="light7" xlink:href = "Images/mai_light1.png"></image>
		<image id="light8" xlink:href = "Images/mai_light1.png"></image>
		<image id="light9" xlink:href = "Images/mai_light1.png"></image>

		</g>

		<!-- first dragonfly -->
		<g id="gDragonfly01" style="visibility: hidden" transform="translate(100, 300)">
			<!--dragonfly's wing-->
			<image id="wing1" xlink:href="Images/image_349.png" width="95" height="53" x="-47" y="-27">
				<animateTransform dur="0.01s" repeatCount="indefinite" additive="sum" attributeName="transform" type="rotate" values="0;10;-20" />
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="0.5s" repeatCount="indefinite" />
			</image>
			<!--Left dragonfly's body-->
			<image id="fly1_left" xlink:href="Images/image_body_left.png" width="45" height="57" x="-33" y="-14"></image>
			<!--Right dragonfly's body-->
			<image id="fly1_right" xlink:href="Images/image_body_right.png" width="45" height="57" x="-12" y="-15">
				<animateTransform attributeName="transform" type="rotate" from="10" to="10" />
			</image>
			<!--use for animation of dragonfly-->
		</g>

		<!-- second dragonfly -->
		<g id="gDragonfly02" style="visibility: hidden" transform="translate(100, 300)">
			<!-- Left dragonfly's body -->
			<!--dragonfly's wing-->
			<image id="wing2" xlink:href="Images/image_349.png" width="95" height="53" x="-47" y="-27">
				<animateTransform dur="0.01s" repeatCount="indefinite" additive="sum" attributeName="transform" type="rotate" values="0;10;-20" />
				<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="0.5s" repeatCount="indefinite" />
			</image>
			<image id="fly2_left" xlink:href="Images/image_body_left.png" width="45" height="57" x="-33" y="-14">
			</image>
			<image id="fly2_right"  xlink:href="Images/image_body_right.png" width="45" height="57" x="-12" y="-15">
				<animateTransform attributeName="transform" type="rotate" from="10" to="10" />
			</image>
			<!-- dragonfly's wing -->
			<!--use for animation of dragonfly -->
		</g>
		
		<a   target="_blank">
		   <text  id = "txt_store_locator"  class = "footer_text" fill="white"  >Store Locator</text>
		</a>
		
		<a   target="_blank">
		   <text  id = "txt_contact_us"  fill="white"  >Contact</text>
		</a>
		
		<a   onClick = "stop_music()" target="_blank">
		   <text  id = "txt_music_on"  fill="white"  >music on</text>
		</a>
		
		<a  onClick = "play_main_music()" target="_blank">
		   <text id = "txt_music_off" fill="white"  >music off</text>
		</a>
		
	
	</svg>



</div>





	<audio id = "main_audio" loop>
		<source src="audio/main.mp3" type="audio/mpeg">
		<source src="audio/main.oga"  type="audio/ogg">				
	</audio>
	
	<audio id = "door_bell">
	   <source src="audio/door_bell.mp3" type="audio/mpeg">
	   <source src="audio/door_bell.oga"  type="audio/ogg">	
	</audio>
	
	<audio id = "door_closing" src="audio/door_closing.mp3"></audio>
	
</body>

<script>
  
	var delay = 0; 
	var window_w, window_h;
	var banner_x, banner_y,bground_x, bground_y;	
	var banner;
	var flyBox1,flyBox2,light_bulb,flyBox1_glow,flyBox2_glow;	
	var door1, door2, flower1, flower2, flower281b,flower4,flower5,flower6,flower7,flower282,flower2822,flower2203;
	var mai_home, mai_story, mai_media, mai_collections;	
	var home_caption, story_caption, media_caption, collections_caption;
	var door237, door241, door245, door247, door249;
	var isStep1Run = false;
	
	/**
	* Modified by Toan Nguyen
	*/
	var underText;	
	var mai_homePoint = new Point(130, 70);
	var mai_storyPoint = new Point(110, 37);
	var mai_mediaPoint = new Point(155, 40);
	var mai_collectionsPoint = new Point(140, 10);
	
	function animateFlowerTranslate(x,y) {		
		startDisplaying(flower4,467,503,Math.round(window_w/2) - 480  + x, Math.round(window_h/2) - 291 + y);	
		startDisplaying(flower1,467,503,Math.round(window_w/2) - 30 - x,Math.round(window_h/2) - 250 + y );
		startDisplaying(flower2203,589,556,Math.round(window_w/2) - 220- x,Math.round(window_h/2) - 390 + y );
	}
	
	var isFlowerDisplayed= false;
	function flowerDisplay() {
		isFlowerDisplayed = true;
	}
	
	var isDoorOpen = false;	
	function doorOpen() {
		isDoorOpen = true;
	}
	
	var isDragonFlying = false;	
	function dragonFly() {
		isDragonFlying = true;
	}
	
	function animateFlyBoxes(x,y,ob,of) {
	
		startDisplaying(flyBox1_glow,121+x,128+y, Math.round(window_w/2)- 350,Math.round(window_h/2) - 245);	
		startDisplaying(flyBox2_glow,148+x,113+y, Math.round(window_w/2)- 250,Math.round(window_h/2)  - 205);	
		
		flyBox1.style.opacity = ob;
		flyBox1.style.filter = 'alpha(opacity=' + ob*100 + ')';
		
		flyBox2.style.opacity = ob;
		flyBox2.style.filter = 'alpha(opacity=' + ob*100 + ')';
		
		flyBox1_glow.style.opacity = of;
		flyBox1_glow.style.filter = 'alpha(opacity=' + of*100 + ')';
		
		flyBox2_glow.style.opacity = of;
		flyBox2_glow.style.filter = 'alpha(opacity=' + of*100 + ')';
	
	}	
	
	function stopAnimateFlyBoxes() {
		hideImage(flyBox1_glow);
		hideImage(flyBox2_glow);	
		
		flyBox1.style.opacity = 1;
		flyBox1.style.filter = 'alpha(opacity=' + 100 + ')';
		
		flyBox2.style.opacity = 1;
		flyBox2.style.filter = 'alpha(opacity=' + 100 + ')';
	}
	
	 
    function init()    {
		
		// get element which have id = undertext
		underText = document.getElementById("under_text");
		home_caption = document.getElementById("home_caption");
		story_caption = document.getElementById("story_caption");
		media_caption = document.getElementById("media_caption");
		collections_caption = document.getElementById("collections_caption");
	
	    banner = document.getElementById("banner1"); 	  
	    flower1= document.getElementById("flower1"); 
	    flower2= document.getElementById("flower2"); 	  
	    flower281b= document.getElementById("flower281b");  
		flower4= document.getElementById("flower4");  
		flower5= document.getElementById("flower5");  
		flower6= document.getElementById("flower6"); 
		flower7= document.getElementById("flower7"); 
		flower282= document.getElementById("flower282"); 
		
		flower2822= document.getElementById("flower2822"); 
		hideImage(flower2822);
		
		flower2823= document.getElementById("flower2823"); 
		hideImage(flower2823);
		
		flower2203= document.getElementById("flower2203"); 
		hideImage(flower2203);
		
		hideImage(flower1);
	    hideImage(flower2);
	    hideImage(flower281b);	  
		hideImage(flower4);	  
		hideImage(flower5);	  
		hideImage(flower6);	  
		hideImage(flower7);	 
		hideImage(flower282);	 
	  
	    door1= document.getElementById("door1"); 
		
		light_bulb= document.getElementById("light_bulb"); 
		hideImage(light_bulb); 
		
	    door2= document.getElementById("door2");
		door237= document.getElementById("door237");
		door241= document.getElementById("door241");
		door245= document.getElementById("door245");
		door247= document.getElementById("door247");
		door249= document.getElementById("door249");
	  
	    hideImage(door1);
	    hideImage(door2);  
		hideImage(door237); 
		hideImage(door241); 
		hideImage(door245); 
		hideImage(door247); 
		hideImage(door249); 
		
	    flyBox1 = document.getElementById("flybox1"); 
	    flyBox2 = document.getElementById("flybox2"); 
	  
	    hideImage(flyBox1);
	    hideImage(flyBox2);	  
		
		
		flyBox1_glow = document.getElementById("flybox1_glow"); 
	    flyBox2_glow = document.getElementById("flybox2_glow"); 
		
			  
	    hideImage(flyBox1_glow);
	    hideImage(flyBox2_glow);	  
		  
	    mai_home = document.getElementById("mai_home"); 
		hideImage(mai_home);
		
		mai_media = document.getElementById("mai_media"); 
		hideImage(mai_media);
		
		mai_story = document.getElementById("mai_story"); 
		hideImage(mai_story);
		
		mai_collections = document.getElementById("mai_collections"); 
		hideImage(mai_collections);
		  	  
	    window_w = window.innerWidth;
		window_h = window.innerHeight;
		
	    setTimeout(doAnimation_step1, delay); 	 
	    
	    setTimeout(function () { doAnimation_step2();}, 1600); 
		
		setTimeout(light_animation, 3500);
		
		setTimeout(function(){
			startDisplaying(underText, 100,100, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
			var mai_home_scale = document.getElementById("mai_home_scale");				
			startDisplaying(mai_home_scale, 62,59, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
			startDisplaying(home_caption, 70,43, Math.round(window_w/2) + mai_homePoint.X - 20, Math.round(window_h/2) - mai_homePoint.Y + 10);
			menuSelected = "mai_home";
		}, 2000);
		
		//init dragon
		var date = new Date();
		beginTime = date.getTime();
		dragonfly1 = new DragonflyObj(BrowseWidth, BrowseHeight, new Point(Math.round(window_w/2) - 265, Math.round(window_h/2) - 140), 'gDragonfly01', 'fly1_left', 'fly1_right', true);
		dragonfly1.init();
		dragonfly2 = new DragonflyObj(BrowseWidth, BrowseHeight, new Point(Math.round(window_w/2) - 164, Math.round(window_h/2)  - 130), 'gDragonfly02', 'fly2_left', 'fly2_right', false);
		dragonfly2.init();
		timer = setInterval(do_dragon_anim, delay_anim);   
    }
	
	
    function doAnimation_step1() { 					
	
		startDisplaying(banner,177,135,Math.round(window_w/2) - 99,Math.round(window_h/2) - 48);
		setTimeout(function(){startDisplaying(banner,354,270,Math.round(window_w/2) - 177,Math.round(window_h/2) - 135);},200)
		setTimeout(function (){startDisplaying(banner,266,190,Math.round(window_w/2) - 133,Math.round(window_h/2) - 95);},300)
		//original size
		setTimeout(function (){startDisplaying(banner,177,134,Math.round(window_w/2) - 88,Math.round(window_h/2) - 67);},600)
		setTimeout(function (){startDisplaying(banner,88,66,Math.round(window_w/2) - 44,Math.round(window_h/2) - 33);},1000)
		setTimeout(function (){startDisplaying(banner,44,32,Math.round(window_w/2) - 22,Math.round(window_h/2) - 16);},1100)
		setTimeout(function (){startDisplaying(banner,22,16,Math.round(window_w/2) - 11,Math.round(window_h/2) - 8);},1200)
		setTimeout(function (){startDisplaying(banner,0,0,Math.round(window_w/2),Math.round(window_h/2));},1300)
		setTimeout(function (){isStep1Run = true;},1400)	
		
    }

	
	function doAnimation_step2() { 
		
		animateFlowerTranslate(0,0);
		
		if (!isFlowerDisplayed)
		{			
			setTimeout(function () {animateFlowerTranslate(40,20);}, 200);			
			setTimeout(function () {animateFlowerTranslate(30,15);}, 300);		
			setTimeout(function () {animateFlowerTranslate(20,10);}, 400);		
			setTimeout(function () {animateFlowerTranslate(10,5);}, 500);
			setTimeout(function () {animateFlowerTranslate(0,0);}, 600);
			setTimeout(function () {animateFlowerTranslate(-10,-5);}, 700);
			setTimeout(function () {animateFlowerTranslate(-20,-10);}, 800);
			setTimeout(function () {animateFlowerTranslate(-10,-5);}, 900);
			setTimeout(function () {animateFlowerTranslate(0,0);}, 1000);						
		}
		
		setTimeout(function () {flowerDisplay();}, 1100);
		
		startDisplaying(flower2,223,198,Math.round(window_w/2) + 140, Math.round(window_h/2) + 50);		
		startDisplaying(flower281b,175,202,Math.round(window_w/2) + 55, Math.round(window_h/2) - 40);		
					
		startDisplaying(flower5,187,217,Math.round(window_w/2) - 300,Math.round(window_h/2) - 50 );	
		startDisplaying(flower6,223,198,Math.round(window_w/2) - 400,Math.round(window_h/2) + 50);			
		startDisplaying(flower7,132,232,Math.round(window_w/2) + 60 ,Math.round(window_h/2) - 150);				
		startDisplaying(flower282,132,232,Math.round(window_w/2)  + 130 ,Math.round(window_h/2) - 200);	
		
		startDisplaying(flower2823,132,232,Math.round(window_w/2)  - 290 ,Math.round(window_h/2) - 200);	
			
		
		startDisplaying(mai_home, 62,59,Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);			
		startDisplaying(mai_story,62,59,Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);	
		startDisplaying(mai_media,62,59,Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);	
		startDisplaying(mai_collections,62,59,Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
		
		/**
			translate scale menu images
		*/
		stranslateScaleImages();
		
		startDisplaying(door1,863,606,Math.round(window_w/2) - 430, Math.round(window_h/2) - 303);			
		startDisplaying(light_bulb,173,290,Math.round(window_w/2) - 195, Math.round(window_h/2)- 90);			
		startDisplaying(door2,190,290,Math.round(window_w/2) - 125, Math.round(window_h/2) - 88);			
		
		if(!isDoorOpen)
		{
			startDisplaying(door237,190,290,Math.round(window_w/2) - 125, Math.round(window_h/2) - 88);
			startDisplaying(door241,190,290,Math.round(window_w/2) - 125, Math.round(window_h/2) - 88);
			startDisplaying(door245,190,290,Math.round(window_w/2) - 125, Math.round(window_h/2) - 88);
			startDisplaying(door247,190,290,Math.round(window_w/2) - 125, Math.round(window_h/2) - 88);
			startDisplaying(door249,190,290,Math.round(window_w/2) - 125, Math.round(window_h/2) - 88);		
			//setTimeout(hideImage(door237),10000);
			setTimeout(function (){hideImage(door237);},500);
			setTimeout(function (){hideImage(door241);},600);
			setTimeout(function (){hideImage(door245);},700);
			setTimeout(function (){hideImage(door247);},800);
			setTimeout(function (){hideImage(door249);},900);
			setTimeout(function (){doorOpen();},1000);			
		}
		
		
		startDisplaying(flyBox1,111,118, Math.round(window_w/2)- 350,Math.round(window_h/2) - 240);	
		startDisplaying(flyBox2,138,102, Math.round(window_w/2)- 250,Math.round(window_h/2)  - 200);	
		
		if(!isDragonFlying)
		{
			setTimeout(function() {animateFlyBoxes(2,2,0.8,0.2);}, 2000);		
			setTimeout(function() {animateFlyBoxes(1,1,0.6,0.8);}, 2300);	
			setTimeout(function() {animateFlyBoxes(2,2,0.8,0.2);}, 2600);			
			setTimeout(function() {animateFlyBoxes(0,0,0.5,0.8);}, 3000);
			setTimeout(function() {animateFlyBoxes(0,0,0.6,0.5);}, 5000);		
			setTimeout(function() {animateFlyBoxes(0,0,0.8,0.2);}, 6000);		
			setTimeout(function() {stopAnimateFlyBoxes();}, 7000);
			setTimeout(function() {dragonFly();}, 7100);			
		}
		
		//setTimeout(hideImage(door2), 10000000); 
		var light1 = document.getElementById("light1");
		
		display_footer_links();
		
		play_main_music();		
		
		
		
		var door_bell=document.getElementById("door_bell");	
		setTimeout(function (){door_bell.volume = 0.1; door_bell.play();}, 3000);		
		
		setTimeout(function(){set_bell_ring_volume(0.4);},4000);		
		setTimeout(function(){set_bell_ring_volume(0.7);},5000);
		setTimeout(function(){set_bell_ring_volume(0.8);},7000);
		setTimeout(function(){set_bell_ring_volume(0.5);},7000);
		setTimeout(function(){set_bell_ring_volume(0.1);},7500);
		setTimeout(function(){set_bell_ring_volume(0.05);},8000);		
		setTimeout(function(){stop_bell_ring();},9000);		
		
    }
	
	function display_footer_links() {
	
	    var store_locator = document.getElementById("txt_store_locator");
		store_locator.setAttribute("x",  eval(window_w - 260) );  
		store_locator.setAttribute("y",  eval(window_h - 20)  ); 
		store_locator.style.display = "block"; 	

        var contact_us = document.getElementById("txt_contact_us");
		contact_us.setAttribute("x",  eval(window_w - 160) );  
		contact_us.setAttribute("y",  eval(window_h - 20)  ); 
		contact_us.style.display = "block"; 			
		
	}	
	
	
	function light_animation(isResize){
		var point1 = new Point(Math.round(window_w/2) - 390,Math.round(window_h/2) + 10);
		var point2 = new Point(Math.round(window_w/2) - 310,Math.round(window_h/2) - 100);
		var point3 = new Point(Math.round(window_w/2) - 340,Math.round(window_h/2) - 110);
		var point4 = new Point(Math.round(window_w/2) - 305,Math.round(window_h/2) - 40);
		var point5 = new Point(Math.round(window_w/2) + 240,Math.round(window_h/2) + 10);
		var point6 = new Point(Math.round(window_w/2) + 250,Math.round(window_h/2) - 70);
		var point7 = new Point(Math.round(window_w/2) + 200,Math.round(window_h/2) - 30);
		
		var light1 = document.getElementById("light1");
		var light2 = document.getElementById("light2");
		var light3 = document.getElementById("light3");
		var light4 = document.getElementById("light4");
		var light5 = document.getElementById("light5");
		var light6 = document.getElementById("light6");
		var light7 = document.getElementById("light7");		
		var t = 2;
		if(isResize){
			t = 0;
		}		
		startDisplaying(light1,50,50, point1.X, point1.Y);
		setTimeout(function() {startDisplaying(light2,60,60, point2.X, point2.Y);}, t * 100);
		setTimeout(function() {startDisplaying(light3,40,40, point3.X, point3.Y);}, t * 300);
		setTimeout(function() {startDisplaying(light4,30,30, point4.X, point4.Y);}, t * 400);
		setTimeout(function() {startDisplaying(light5,50,50, point5.X, point5.Y);}, t * 200);
		setTimeout(function() {startDisplaying(light6,50,50, point6.X, point6.Y);}, t * 400);
		setTimeout(function() {startDisplaying(light7,30,30, point7.X, point7.Y);}, t * 400);
	}
	
	function stop_music() {	
		var music_off = document.getElementById("txt_music_off");		
		music_off.setAttribute("x",  eval(window_w - 100) );  
		music_off.setAttribute("y",  eval(window_h - 20)  ); 
		music_off.style.display = "block"; 		
		
		var music_on = document.getElementById("txt_music_on");		
		music_on.style.display = "none"; 
		
		var main_audio=document.getElementById("main_audio");
		var door_bell=document.getElementById("door_bell");
		main_audio.pause();
		door_bell.pause();
	}
	
	function play_main_music() {    
		
		var music_on = document.getElementById("txt_music_on");
		music_on.setAttribute("x",  eval(window_w - 90) );  
		music_on.setAttribute("y",  eval(window_h - 20)  ); 
		music_on.style.display = "block"; 	

		var music_off = document.getElementById("txt_music_off");		
		music_off.style.display = "none"; 		
		
		var main_audio=document.getElementById("main_audio");
		main_audio.play();					
	}
	
	function stop_bell_ring() {
		var door_bell=document.getElementById("door_bell");	
		door_bell.pause();
	}
	
	function set_bell_ring_volume(volume) {
		var door_bell=document.getElementById("door_bell");	
		door_bell.volume =volume;
	}
	
	
	function hideImage(elem)	{	  
		elem.setAttribute("width", "0px");  
		elem.setAttribute("height", "0px");  	
	}
	
	function startDisplaying(elem, x,y, tx, ty)	{	    
		elem.setAttribute("transform", "translate("+ eval(tx + 15) +"," +  eval(ty + 40) + ")"); 		
		elem.setAttribute("width",  x + "px");  
		elem.setAttribute("height", y + "px");
	}
	
	function translate(elem, x, y){
		elem.setAttribute("transform", "translate("+ eval(x + 15) +"," +  eval(y + 40) + ")"); 	
	}
	
	var menuSelected = "";
	function stranslateScaleImages(){
		switch(menuSelected){
			case "mai_home":
				var mai_home_scale = document.getElementById("mai_home_scale");	
				translate(mai_home_scale, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
				translate(underText, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
				translate(home_caption, Math.round(window_w/2) + mai_homePoint.X - 20, Math.round(window_h/2) - mai_homePoint.Y + 10);
				break;
			case "mai_story":
				var mai_story_scale = document.getElementById("mai_story_scale");
				translate(mai_story_scale, Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);
				translate(underText, Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);
				translate(story_caption, Math.round(window_w/2) + mai_storyPoint.X - 38, Math.round(window_h/2) - mai_storyPoint.Y - 2);
				break;
			case "mai_collections":
				var mai_collections_scale = document.getElementById("mai_collections_scale");
				translate(mai_collections_scale, Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
				translate(underText, Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
				translate(collections_caption, Math.round(window_w/2) + mai_collectionsPoint.X - 28, Math.round(window_h/2) - mai_collectionsPoint.Y - 5);
				break;
			case "mai_media":				
				var mai_media_scale = document.getElementById("mai_media_scale");
				translate(mai_media_scale, Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);
				translate(underText, Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);
				translate(media_caption, Math.round(window_w/2) + mai_mediaPoint.X - 20, Math.round(window_h/2) - mai_mediaPoint.Y + 12);
				break;
			default:
				break;
		
		}
		
	}
	
	function resetMenu(){
		var mai_home_scale = document.getElementById("mai_home_scale");	
		var mai_story_scale = document.getElementById("mai_story_scale");
		var mai_collections_scale = document.getElementById("mai_collections_scale");
		var mai_media_scale = document.getElementById("mai_media_scale");
		hideImage(underText);
		hideImage(home_caption);
		hideImage(story_caption);
		hideImage(collections_caption);
		hideImage(media_caption);
		hideImage(mai_home_scale);
		hideImage(mai_story_scale);
		hideImage(mai_collections_scale);
		hideImage(mai_media_scale);
		
		startDisplaying(mai_home, 62,59, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);	
		startDisplaying(mai_story, 62,59, Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);
		startDisplaying(mai_media, 62,59, Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);
		startDisplaying(mai_collections, 62,59, Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
	}
	
	/**
	* Mouseover
	*/	
	function scaleUp(elem) {
		resetMenu();		
		switch(elem.id)
		{		
		   case 'mai_home' :
				startDisplaying(underText, 100,100, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
				var mai_home_scale = document.getElementById("mai_home_scale");				
				startDisplaying(mai_home_scale, 62,59, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
				startDisplaying(home_caption, 70,43, Math.round(window_w/2) + mai_homePoint.X - 20, Math.round(window_h/2) - mai_homePoint.Y + 10);
				menuSelected = "mai_home";
				break;
				
			case 'mai_story':
				startDisplaying(underText, 100,100, Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);
				var mai_story_scale = document.getElementById("mai_story_scale");
				startDisplaying(mai_story_scale, 62,59, Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);
				startDisplaying(story_caption, 102,54, Math.round(window_w/2) + mai_storyPoint.X - 38, Math.round(window_h/2) - mai_storyPoint.Y - 2);
				menuSelected = "mai_story";
				break;
			case 'mai_collections' :
				startDisplaying(underText, 100,100, Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
				var mai_collections_scale = document.getElementById("mai_collections_scale");
				startDisplaying(mai_collections_scale, 62,59, Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
				startDisplaying(collections_caption, 107,56, Math.round(window_w/2) + mai_collectionsPoint.X - 28, Math.round(window_h/2) - mai_collectionsPoint.Y - 5);
				menuSelected = "mai_collections";
				break;
			case 'mai_media' :
				startDisplaying(underText, 100,100, Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);
				var mai_media_scale = document.getElementById("mai_media_scale");
				startDisplaying(mai_media_scale, 62,59, Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);
				startDisplaying(media_caption, 71,43, Math.round(window_w/2) + mai_mediaPoint.X - 20, Math.round(window_h/2) - mai_mediaPoint.Y + 12);
				menuSelected = "mai_media";
				break;
			default:
				break;				
			}
	}
	
	/**
	* Mouseout
	*/
	function scaleDown(elem) {
		switch(elem.id)
		{							
			case 'mai_story_scale' :
				// hide underText first
				hideImage(underText);
				var mai_story_scale = document.getElementById("mai_story_scale");
				hideImage(mai_story_scale);				
				hideImage(story_caption);
				startDisplaying(mai_story, 62,59, Math.round(window_w/2) + mai_storyPoint.X, Math.round(window_h/2) - mai_storyPoint.Y);
				
				break;
			case 'mai_media_scale' :
				hideImage(underText);
				var mai_media_scale = document.getElementById("mai_media_scale");
				hideImage(mai_media_scale);
				hideImage(media_caption);
				startDisplaying(mai_media, 62,59, Math.round(window_w/2) + mai_mediaPoint.X, Math.round(window_h/2) - mai_mediaPoint.Y);
				
				break;		
			case 'mai_collections_scale' :
				hideImage(underText);
				var mai_collections_scale = document.getElementById("mai_collections_scale");
				hideImage(mai_collections_scale);
				hideImage(collections_caption);
				startDisplaying(mai_collections, 62,59, Math.round(window_w/2) + mai_collectionsPoint.X, Math.round(window_h/2) - mai_collectionsPoint.Y);
				break;			
			default:
				break;				
			}
		
		startDisplaying(underText, 100,100, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
		var mai_home_scale = document.getElementById("mai_home_scale");				
		startDisplaying(mai_home_scale, 62,59, Math.round(window_w/2) + mai_homePoint.X, Math.round(window_h/2) - mai_homePoint.Y);
		startDisplaying(home_caption, 70,43, Math.round(window_w/2) + mai_homePoint.X - 20, Math.round(window_h/2) - mai_homePoint.Y + 10);
		menuSelected = "mai_home";
	}
		
    
	// Browser's height and browser's width
	var BrowseWidth = window.innerWidth;
	var BrowseHeight = window.innerHeight;

	// Constant variables
	var DELAYTIME = 0.5;
	var VELOCITY = 100;
	var ACCELERATION = 100;
	var X_CHANGEBODY = 600;
	var TIMEAPPEARANCE = 5;
	var TIMESTARTMOVE = TIMEAPPEARANCE + 2;
	var delay_anim = 1; // The delay between animation stills, in milliseconds. Affects
	// animation smoothness

	// Point class
	function Point(x, y) {
		this.X = x;
		this.Y = y;
		this.toString = function () {
			return this.X + " " + this.Y;
		};
	}

	/**
	 * Helpful functions
	 */
	/**
	 * This function used to calculate distance between 2 points
	 */
	function hel_Distance(point1, point2) {
		var distance = Math.sqrt(Math.pow((point1.X - point2.X), 2)
				+ Math.pow((point1.Y - point2.Y), 2));
		return distance;
	}

	/**
	 * Dragonfly class
	 * @param width, height: browser's width and browser's height
	 * @position: The first dragonfly's position
	 * @flyId: The Id of dragonfly's tag <g> 
	 * @flyLeftBodyId: The id of dragonfly's left body
	 * @flyRightBodyId: the id of dragonfly's right body
	 */
	function DragonflyObj(width, height, position, flyId, flyLeftBodyId, flyRightBodyId, isLeft) {
            // Task 1: init path, curPoint, beginPoint, endPoint, domElement,
            // arrayPoints, deltalTime, limitTime
            // init path
            this.arrayPoints = [];
            for (var i = 0; i < 500; i++) {
                var x = Math.floor((Math.random() * width) + 1);
                var y = Math.floor((Math.random() * height) + 1);

                if (x < 70) {
                    x = 70;
                }
                if (x > (width - 70)) {
                    x -= 70;
                }

                if (y < 70) {
                    y = 70;
                }
                if (y > (height - 70)) {
                    y -= 70;
                }
                this.arrayPoints.push(new Point(x, y));
            }

            this.dragonflyID = flyId;
            this.dragonflyLeftBodyID = flyLeftBodyId;
            this.dragonflyRightBodyID = flyRightBodyId;
            this.curPoint = position;
            this.beginPoint = new Point(0, 0);
            this.endPoint = new Point(0, 0);
            this.detalTime = 0;
            this.curIndex = -1;
            this.curS = 0;
            this.limitS = 0;
            this.VectorVelocity = new Point(0, 0);
            this.Vo = 0;
            this.isLeftBody = isLeft;
            this.isAppearance = false;
            this.isMove = false;

            // Task 2: create methods: init() pathToString(), getListPoints(),
            // update(), render()
            /**
             * 
             */
            this.init = function () {
                this.arrayPoints.push(this.curPoint);
                this.curIndex = 0;

                // calculate acceleration a = (v*v)/s
                if (this.arrayPoints.length > 2) {
                    var S = hel_Distance(this.arrayPoints[0], this.arrayPoints[1]);
                    if (S != 0) {
                        this.aX = VELOCITY * VELOCITY / S;
                        this.aY = this.aX;
                    }
                }

            };

            /**
            * Scaling the path base on a scale
            */
            this.scalePath = function (widthScale, heightScale) {
                for (var i = 0; i < this.arrayPoints.length; i++) {
                    this.arrayPoints[i].X *= widthScale;
                    this.arrayPoints[i].Y *= heightScale;
                }
            }

            /**
             * update position and some variables
             */
            this.isCenterPoint = false;
            this.update = function (detalTime) {
                // Check if total item in arrayPoints less than 2 or not. 
                // If this.arrayPoints.length < 2 do not thing.
                if (this.arrayPoints.length < 2) {
                    return;
                }
                
                this.detalTime += detalTime;
                // check if it's time to be appearance
                if (!this.isMove) {
                    if (!this.isAppearance) {
                        if (this.detalTime > TIMEAPPEARANCE) {
                            this.isAppearance = true;
                        }
                    }
                    if (this.detalTime > TIMESTARTMOVE) {
                        this.isMove = true;
                        detalTime = 0;
                    }
                    return;
                }

                // Task update curPoint
                if (this.curS < this.limitS) {
                    if (this.detalTime < DELAYTIME) {
                        return;
                    }
                    var time = this.detalTime - DELAYTIME;
                    var velocity = 0;
                    var a = ACCELERATION;

                    velocity = this.Vo + (a * time);
                    var Vx = this.VectorVelocity.X * velocity;
                    var Vy = this.VectorVelocity.Y * velocity;

                    this.curPoint.X = this.beginPoint.X + Vx * time;
                    this.curPoint.Y = this.beginPoint.Y + Vy * time;
                    if (this.curPoint.X >= X_CHANGEBODY) {
                        this.isLeftBody = false;
                    }
                    else {
                        this.isLeftBody = true;
                    }
                    this.curS = hel_Distance(this.curPoint, this.beginPoint);
                } else {
                    // Check if current index is equal last item in arrrayPoints
                    if (this.curIndex === (this.arrayPoints.length - 1)) {
                        // Current index is the last item so the endPoint must be the begin item of arrayPoints
                        this.beginPoint.X = this.curPoint.X;
                        this.beginPoint.Y = this.curPoint.Y;
                        this.endPoint = this.arrayPoints[0];
                        this.curIndex = 0;

                    }
                    else {
                        this.beginPoint.X = this.curPoint.X;
                        this.beginPoint.Y = this.curPoint.Y;
                        this.endPoint = this.arrayPoints[this.curIndex + 1];
                        this.curIndex++;
                    }

                    // Vector velocity
                    this.VectorVelocity.X = this.endPoint.X - this.beginPoint.X;
                    this.VectorVelocity.Y = this.endPoint.Y - this.beginPoint.Y;
                    this.VectorVelocity.Y = this.VectorVelocity.Y / Math.abs(this.VectorVelocity.X);
                    this.VectorVelocity.X = this.VectorVelocity.X / Math.abs(this.VectorVelocity.X);

                    this.limitS = hel_Distance(this.beginPoint, this.endPoint);// Distance between beginPoint and endPoint
                    this.curS = 0; // Distance between curPoint and beginPoint
                    this.isCenterPoint = false;
                    this.detalTime = 0;
                }
                //document.getElementById('showInfo').innerText = "finish update";
            };

            /**
            * Render 
            */
            this.render = function () {
                if (!this.isAppearance)
                {
                    return;
                }
                var dragonflyDom = document.getElementById(this.dragonflyID);
                var dragonflyRightBodyDom = document.getElementById(this.dragonflyRightBodyID);
                var dragonflyLeftBodyDom = document.getElementById(this.dragonflyLeftBodyID);

                dragonflyDom.setAttribute("style", "visibility: visible");
                var stranslate = "translate(" + this.curPoint.X + "," + this.curPoint.Y
                + ")";                
                dragonflyDom.setAttribute('transform', stranslate);

                

                if (this.isLeftBody) {
                    dragonflyRightBodyDom.setAttribute("style", "visibility: hidden");
                    dragonflyLeftBodyDom.setAttribute("style", "visibility: visible");
                } else {
                    dragonflyRightBodyDom.setAttribute("style", "visibility: visible");
                    dragonflyLeftBodyDom.setAttribute("style", "visibility: hidden");
                }
            };

        }

        // Global variables
        var timer;
        var dragonfly1;
        var dragonfly2;
        var beginTime = 0;

        /**
        * Initialize dragonfly
        */
        function init_dragon() {
                
        }

        /**
         * update animation for dragonflys
         */
        function do_dragon_anim() {
			
            var curTime = new Date().getTime();
            var detalTime = (curTime - beginTime) / 1000;
            beginTime = curTime;
            // update
            dragonfly1.update(detalTime);
            dragonfly2.update(detalTime);
            //render
            dragonfly1.render();
            dragonfly2.render();
        }

        function resize() {
            var browserW = window.innerWidth;
            var browerH = window.innerHeight;

            var widthScale = browserW / BrowseWidth;
            var heightScale = browerH / BrowseHeight;

            BrowseHeight = browerH;
            BrowseWidth = browserW;
            if (dragonfly1) {
                dragonfly1.scalePath(widthScale, heightScale);
            }
            if (dragonfly2) {
                dragonfly2.scalePath(widthScale, heightScale);
            }
			
			window_w = window.innerWidth;
			window_h = window.innerHeight;
			doAnimation_step2();
			light_animation(true);
        }

	
  </script>


</html>

